<template>
  <div class="container">
    <div class="content" style="margin-top:30px;">
      <div class="left">
        <img style="width:100%;" 
          :src="value.goods_url" alt="图片加载失败">
      </div>
      <div class="right">
        <div style="height:70px;">
          <p style="font-size:22px;">{{value.goods_title}}</p>
        </div>
        <div class="price">
          <div><span>价格</span><span style="color:red;font-size:24px;">￥
            {{value.goods_price}}</span></div>
          <div><span>类型</span><span>{{value.goods_type}}</span></div>
          <div><span>服务</span><span>由品尚提供相关服务</span><span>质量保证</span></div>
        </div>
        <div>
          <span style="margin-right:40px;">数量</span>
          <InputNum/>
        </div>
        <div>
          <button @click="purchase" style="margin-right:20px;">立即购买</button>
          <button>加入购物车</button>
        </div>
      </div>
    </div>
    <div style="clear:both;"></div>
  </div>
</template>

<script>
import InputNum from '../components/common/InputNum'
export default {
    name:'Detail',
    props:['value'],
    components:{InputNum},
    methods: {
      purchase(){
        if (this.$local.isExist('key')) {
          this.value.car_goods_num='1'
          let arr = []
          arr.push(this.value)
          const array = JSON.stringify(arr)
          this.$router.replace({path:'/settlement',query:{value:array}})
        }else{
          this.$message.error("登录令牌不存在！")
          this.$router.push('/user/info')
        }
      }
    },
}
</script>

<style scoped>
  .left{
    width: 440px;
    height: 440px;
    float: left;
    border-radius: 8px;
    overflow: hidden;
  }
  .right{
    width: 528px;
    height: 400px;
    float: right;
    border-radius: 8px;
  }
  .right > div:nth-of-type(n+3){
    margin-top: 30px;
  }
  .price{
    padding: 15px;
    background:white;
    font-size: 14px;
  }
  .price > div span:nth-of-type(n+2){
    margin-left: 25px;
  }
  .price > div{
    margin-top: 5px;
    margin-bottom: 10px;
  }
  .price span{
    color: grey;
  }
  .right button{
    font-size: 20px;
    padding: 10px 30px;
  }
  .right button:last-child{
    background: #E64347;
  }
</style>